<template>
    <div style="margin-right:5px ;height: 100%;">
        <el-space style="margin-left:5px ;" wrap>
            <img src="icon1.ico" />
            <h3 style="display:inline;">
                <scan style="color:rgb(248,63,63) ;">E企查后台管理系统</scan>
            </h3>
        </el-space>
        <el-menu style="height: 91%;" :collapse="isCollapse" class="el-menu-vertical-demo menu">
            <el-menu-item  index="2" @click="$router.push('index')">
                <el-icon>
                    <PieChart />
                </el-icon>
                <template #title>
                    <span>后台总览</span>
                </template>
            </el-menu-item>

            <el-sub-menu index="3">
                <template #title>
                    <el-icon>
                        <User />
                    </el-icon>
                    <scan v-show="!isCollapse">用户管理</scan>
                </template>

                <el-menu-item-group>
                    <el-menu-item index="3-1" @click="showTableByName('User')">
                        <el-icon>
                            <Message />
                        </el-icon>信息管理
                    </el-menu-item>
                    <el-menu-item index="3-2" @click="pushItem('评论管理')">
                        <el-icon>
                            <ChatDotSquare />
                        </el-icon>评论管理
                    </el-menu-item>
                    <el-menu-item index="3-3" @click="pushItem('订阅记录管理')">
                        <el-icon>
                            <Star />
                        </el-icon>订阅记录管理
                    </el-menu-item>
                    <el-menu-item index="3-4" @click="pushItem('浏览记录管理')">
                        <el-icon>
                            <View />
                        </el-icon>浏览记录管理
                    </el-menu-item>
                    <el-menu-item index="3-5" @click="pushItem('搜索记录管理')">
                        <el-icon>
                            <Search />
                        </el-icon>搜索记录管理
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>


            <el-sub-menu index="4">
                <template #title>
                    <el-icon>
                        <OfficeBuilding />
                    </el-icon>
                    <scan v-show="!isCollapse">公司管理</scan>
                </template>

                <el-menu-item-group>
                    <el-menu-item index="4-1" @click="showTableByName('Company')">
                        <el-icon>
                            <School />
                        </el-icon>
                        信息管理
                    </el-menu-item>
                    <el-menu-item index="4-2" @click="showTableByName('Tag')">
                        <el-icon>
                            <CollectionTag />
                        </el-icon>标签管理
                    </el-menu-item>
                    <el-menu-item index="4-3" @click="showTableByName('ESGMessage')">
                        <el-icon>
                            <CircleCheck />
                        </el-icon>ESG评分管理
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="5">
                <template #title>
                    <el-icon>
                        <Document />
                    </el-icon>
                    <scan v-show="!isCollapse">数据管理</scan>
                </template>

                <el-menu-item-group>
                    <el-menu-item index="5-1" @click="showTableByName('DataContent')">
                        <el-icon>
                            <DocumentChecked />
                        </el-icon>信息管理
                    </el-menu-item>
                    <el-menu-item index="5-2" @click="showTableByName('DataType')">
                        <el-icon>
                            <ChatDotSquare />
                        </el-icon>分类管理
                    </el-menu-item>

                    <el-menu-item index="5-3" @click="showTableByName('ESGCategory')">
                        <el-icon>
                            <Collection />
                        </el-icon>ESG分类管理
                    </el-menu-item>
                    <el-menu-item index="5-4" @click="showTableByName('KeyWord')">
                        <el-icon>
                            <Memo />
                        </el-icon>
                        <span>数据关键词管理</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="6" @click="$router.push('setting')">
                <el-icon>
                    <Setting />
                </el-icon>
                <template #title>
                    <scan>其他设置</scan>
                </template>
            </el-menu-item>

            <el-menu-item style="bottom: 0;position: relative;" index="7" @click="isCollapse=!isCollapse">
                <el-icon style="margin: auto;" v-show="!isCollapse">
                    <ArrowUpBold />
                </el-icon>
                <el-icon v-show="isCollapse">
                    <ArrowRightBold />
                </el-icon>
            </el-menu-item>

        </el-menu>
    </div>
</template>

<script>
import router from '../router';

export default {
    data() {
        return {
            isCollapse: false
        }
    }, methods: {
        showTableByName(name) {
            this.$store.dispatch('getAll' + name)
            this.$store.commit("setPageName", name)
            this.$router.push({
                path: 'table',
                query: {
                    name: name
                }
            })
        }
    }
}
</script>